<template>
  <div>
    <div>
      <el-form size="medium">
        <el-form :inline="true">
          <el-form-item label="公司名称">
            <el-input v-model="companyName"
                      placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model.number="phone"
                      placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="userName"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary"
                       @click="getUserList">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="状态">
            <el-select v-model="status"
                       placeholder="请选择审核状态">
              <el-option label="未认证"
                         value=0></el-option>
              <el-option label="审核中"
                         value=1></el-option>
              <el-option label="已认证"
                         value=2></el-option>
              <el-option label="未通过"
                         value=3></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户属性">
            <el-select v-model="label"
                       placeholder="请选择用户属性">
              <el-option label="普通用户"
                         value=0></el-option>
              <el-option label="大客户"
                         value=1></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form>
      <el-table ref="multipleTable"
                border
                stripe
                :data="userList"
                tooltip-effect="dark"
                style="width: 100%">
        <el-table-column prop="createdTime"
                         label="注册时间"></el-table-column>
        <el-table-column prop="phone"
                         label="手机号"></el-table-column>
        <el-table-column prop="companyName"
                         label="公司名称"></el-table-column>
        <el-table-column prop="userName"
                         label="用户名称"></el-table-column>
        <el-table-column prop="labelName"
                         label="用户属性"></el-table-column>
        <el-table-column label="认证状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0"
                  class="cell-warning">{{scope.row.statusName}}</span>
            <span v-if="scope.row.status === 1"
                  class="cell-info">{{scope.row.statusName}}</span>
            <span v-if="scope.row.status === 2"
                  class="cell-success">{{scope.row.statusName}}</span>
            <span v-if="scope.row.status === 3"
                  class="cell-fail">{{scope.row.statusName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="300">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1"
                       @click="judge(scope.row.userId)"
                       size="mini"
                       type="primary"
                       plain>去审核</el-button>
            <el-button v-else
                       @click="detail(scope.row.userId)"
                       size="mini"
                       type="primary"
                       plain>查看详情</el-button>
            <el-button v-if="(scope.row.label === 0 || !scope.row.label ) && scope.row.isChild === 0 && scope.row.status !== 3"
                       @click="setLabel(scope.row.userId, 1)"
                       size="mini"
                       type="primary"
                       plain>设为大客户</el-button>
            <el-button v-if="scope.row.label === 1 && scope.row.status !== 3"
                       @click="setLabel(scope.row.userId, 0)"
                       size="mini"
                       type="warning"
                       plain>设为普通客户</el-button>
            <el-button @click="deleted(scope.row.userId)"
                       class="cell-delete"
                       type="text"
                       icon="el-icon-delete"
                       circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
      </div>
    </div>
    <view-page :current-page="currentPage"
               :total="total"
               @change="pageChange"></view-page>
  </div>
</template>

<style lang="scss">
</style>

<script>
import '@/style/common.scss'
import viewPage from '@/components/pagination'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { api } from '@/api'

export default {
  data() {
    return {
      companyName: null,
      userName: null,
      phone: null,
      label: null,
      status: this.$route.query.status || null,
      userId: this.$route.query.userId || null,
      currentPage: 1,
      total: 100,
      userList: []
    }
  },
  activated() {
    this.getUserList()
  },
  components: { viewPage },
  methods: {
    reset() {
      this.companyName = null
      this.phone = null
      this.status = null
      this.label = null
      this.userName = null
      this.getUserList()
      if (!this.userId) {
        this.userId = null
        this.$router.push({
          name: 'user'
        })
      }
    },
    getUserList() {
      const params = {
        userId: this.userId,
        companyName: this.companyName,
        phone: this.phone,
        userName: this.userName,
        status: this.status,
        label: this.label,
        pageNum: this.currentPage,
        pageSize: 10
      }
      this.$http.post(api.SYS_USER_LIST, params).then(
        res => {
          this.userList = res.data.userList
          this.currentPage = res.data.pageNum
          this.total = res.data.totalSize
        }
      )
    },
    judge(id) {
      this.$router.push({
        name: 'judgeUser',
        params: { userId: id, infoFlag: '0' }
      })
    },
    detail(id) {
      this.$router.push({
        name: 'userInfo',
        params: { userId: id, infoFlag: '1' }
      })
    },
    setLabel(id, label) {
      const params = {
        userId: id,
        label: label
      }
      this.$http.post(api.SYS_USER_SET_LABEL, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('设置成功！', 'success')
            this.getUserList()
          } else {
            this.$msg._message(res.msg, 'error')
          }
        }
      )
    },
    deleted(id) {
      const params = {
        userId: id
      }
      this.$http.get(api.SYS_USER_DELETE, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('删除成功！', 'success')
            this.getUserList()
          } else {
            this.$msg._message(res.msg, 'error')
          }
        }
      )
    },
    pageChange(page) {
      this.currentPage = page
      console.log(this.currentPage)
      this.getUserList()
    }
  }
}
</script>
